<!--<template>-->
<!--  <div class="home-banner">-->
<!--    <XtxCarousel :PlayData="result" :PlayFlag="true" :PlayTime="3000" />-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->
<!--import axios from "axios";-->
<!--import { ref } from "vue";-->

<!--export default {-->
<!--  name: "HomeBanner",-->
<!--  setup() {-->
<!--    const result = ref();-->
<!--    axios-->
<!--      .get("http://pcapi-xiaotuxian-front-devtest.itheima.net/home/banner")-->
<!--      .then((data) => {-->
<!--        result.value = data.data.result;-->
<!--      });-->

<!--    return { result };-->
<!--  },-->
<!--};-->
<!--</script>-->
<!--<style scoped lang="less">-->
<!--.home-banner {-->
<!--  width: 1240px;-->
<!--  height: 500px;-->
<!--  position: absolute;-->
<!--  left: 0;-->
<!--  top: 0;-->
<!--  z-index: 98;-->
<!--  .xtx-carousel {-->
<!--    :deep(.carousel-btn.prev) {-->
<!--      left: 270px;-->
<!--    }-->
<!--    :deep(.carousel-indicator) {-->
<!--      padding-left: 250px;-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</style>-->

<template>
  <div class="home-banner">
    <XtxCarousel
      v-if="banners"
      :autoPlay="true"
      :duration="3000"
      :carousels="banners"
    />
  </div>
</template>
<script>
import XtxCarousel from "@/components/library/XtxCarousel";
import useBanners from "@/hooks/useBanners";
export default {
  name: "HomeBanner",
  components: { XtxCarousel },
  setup() {
    const { banners, getData } = useBanners();
    getData(1);
    return {
      banners,
    };
  },
};
</script>
<style scoped lang="less">
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;
  .xtx-carousel {
    :deep(.carousel-btn.prev) {
      left: 270px;
    }
    :deep(.carousel-indicator) {
      padding-left: 250px;
    }
  }
}
</style>
